<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: #ccc;
        }

        nav>* {
            margin: 0 5px;
        }
    </style>
</head>

<body>
    <p>利用 mock 随机生成一些学生，再按类型查看</p>

    <div>
        <input type="text" placeholder="填写新增姓名" id='add_name'>
        <input type="text" placeholder="填写新增性别" id='add_gender'>
        <input type="button" value='添加'>
    </div>
    <ol></ol>
    <nav></nav>

    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock.js"></script>
    <script>
        const div = document.querySelector('div'); // 填写姓名性别的 div
        const nav = document.querySelector('nav'); // 链接父元素
        const ol = document.querySelector('ol'); // ol

        // 随机生成学生
        let students = Mock.mock({
            'list|10': [{
                "id|+1": 1,
                "name": "@cname()",
                "gender|1": ["男", "女"],
            }]
        }).list;

        var compiled;
        compiled = _.template('<% _.forEach(students, function(user) { %><li><%- user.name %>-<%- user.gender %></li><% }); %>');
        ol.innerHTML = compiled();

        // true: span  false: <a>
        let links = [
            { type: '全部', checked: true },
            { type: '男生', checked: false },
            { type: '女生', checked: false },
        ];

        // 渲染 span a
        // function renderLinks() {
        //     nav.innerHTML = _.chain(links).map(function (item) {
        //         // if (item.checked) {
        //         //     return `<span>${item.type}</span>`;
        //         // } else {
        //         //     return `<a href='javascript:;'>${item.type}</a>`;
        //         // }
        //         return item.checked ? `<span>${item.type}</span>` : `<a href='javascript:;'>${item.type}</a>`;
        //     }).join('').value();
        // }
        function renderLinks() {
            nav.innerHTML = _.chain(links)
                .map(item => item.checked ? `<span>${item.type}</span>` : `<a href='javascript:;'>${item.type}</a>`)
                .join('')
                .value();
        }
        renderLinks()

        let data = [];

        nav.onclick = function (event) {
            let text = event.target.innerText; // 男生 女生 
            switch (text) {
                case '男生':
                    data = _.filter(students, function (o) { return o.gender == '男' }); // 得到渲染数据
                    break;
                case '女生':
                    data = _.filter(students, function (o) { return o.gender == '女' });
                    break;
                case '全部':
                    data = students;
                    break;
            }
            compiled = _.template('<% _.forEach(data, function(user) { %><li><%- user.name %>-<%- user.gender %></li><% }); %>');
            ol.innerHTML = compiled();

            _.forEach(links, function (value, key) { // value:item
                if (value.type == text) {
                    value.checked = true;
                } else {
                    value.checked = false;
                }
            });
            renderLinks();
        }




    </script>
</body>

</html>